<template>
    <!-- #ifdef H5 -->
    <thead class="uni-table-thead">
    <tr class="uni-table-tr">
        <th :rowspan="rowspan" colspan="1" class="checkbox" :class="{ 'tr-table--border': border }">
            <table-checkbox :indeterminate="indeterminate" :checked="checked"
                            @checkboxSelected="checkboxSelected"></table-checkbox>
        </th>
    </tr>
    <slot></slot>
    </thead>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <view class="uni-table-thead">
        <slot></slot>
    </view>
    <!-- #endif -->
</template>

<script>
    import tableCheckbox from '../uni-tr/table-checkbox.vue'

    export default {
        name: 'uniThead',
        components: {
            tableCheckbox
        },
        options: {
            virtualHost: true
        },
        data() {
            return {
                border: false,
                selection: false,
                rowspan: 1,
                indeterminate: false,
                checked: false
            }
        },
        created() {
            this.root = this.getTable()
            // #ifdef H5
            this.root.theadChildren = this
            // #endif
            this.border = this.root.border
            this.selection = this.root.type
        },
        methods: {
            init(self) {
                this.rowspan++
            },
            checkboxSelected(e) {
                this.indeterminate = false
                const backIndexData = this.root.backIndexData
                const data = this.root.trChildren.filter(v => !v.disabled && v.keyValue)
                if (backIndexData.length === data.length) {
                    this.checked = false
                    this.root.clearSelection()
                } else {
                    this.checked = true
                    this.root.selectionAll()
                }
            },
            /**
             * 获取父元素实例
             */
            getTable(name = 'uniTable') {
                let parent = this.$parent
                let parentName = parent.$options.name
                while (parentName !== name) {
                    parent = parent.$parent
                    if (!parent) return false
                    parentName = parent.$options.name
                }
                return parent
            }
        }
    }
</script>

<style lang="scss">
    $border-color: #ebeef5;

    .uni-table-thead {
        display: table-header-group;
    }

    .uni-table-tr {
        /* #ifndef APP-NVUE */
        display: table-row;
        transition: all 0.3s;
        box-sizing: border-box;
        /* #endif */
        border: 1px red solid;
        background-color: #fafafa;
    }

    .checkbox {
        padding: 0 8px;
        width: 26px;
        padding-left: 12px;
        /* #ifndef APP-NVUE */
        display: table-cell;
        vertical-align: middle;
        /* #endif */
        color: #333;
        font-weight: 500;
        border-bottom: 1px $border-color solid;
        font-size: 14px;
        // text-align: center;
    }

    .tr-table--border {
        border-right: 1px $border-color solid;
    }

    /* #ifndef APP-NVUE */
    .uni-table-tr {
        ::v-deep .uni-table-th {
            &.table--border:last-child {
                // border-right: none;
            }
        }

        ::v-deep .uni-table-td {
            &.table--border:last-child {
                // border-right: none;
            }
        }
    }

    /* #endif */
</style>
